<template>
  <div class="container">
    <vs-card-group class="image_group">
      <vs-card
        v-for="card in 4"
        @click="handleClick(card)"
        :key="card"
        class="image_card"
      >
        <template #title>
          <h3>Pot with a plant</h3>
        </template>
        <template #img>
          <img
            :src="icons[card - 1]"
            alt=""
            style="width: 500px; height: 230px"
          />
        </template>
        <template #interactions>
        </template>
      </vs-card>
    </vs-card-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      icons: [
        require(`@/pages/image/clock1.jpg`),
        require(`@/pages/image/clock2.jpg`),
        require(`@/pages/image/clock3.jpg`),
        require(`@/pages/image/clock4.jpg`),
      ]
    }
  },
  methods: {
    handleClick (card) {
      console.log(card)
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #647e6037;
  width: 1200px;
  height: 300px;
  top: 2%;
  left: 6%;
  border-radius: 15px;
  position: absolute;
}
.image_card {
  width: 500px;
  height: 230px;
}
</style>
